<template>
	<view class="detail-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="true" color="#fff" :title="title"></uni-navbar></view>

		<view class="form-box">
			<u-form :model="form" ref="uForm">
				<u-form-item class="form-item border-none" required label="提交人">
					<!-- block -->
					<u-input v-model="form.submitUser" type="text" placeholder="请输入提交人" />
				</u-form-item>
				<u-form-item class="form-item" required label="联系电话" prop="phone">
					<!-- block -->
					<u-input v-model="form.phone" type="number" placeholder="请输入联系电话" />
				</u-form-item>

				<u-form-item class="form-item border-none" required label="代表姓名">
					<!-- block -->
					<u-input disabled v-model="form.userName" type="text" placeholder="请输入代表姓名" />
				</u-form-item>

				<u-form-item class="form-item border-none" required label="镇街">
					<!-- block -->
					<u-input disabled v-model="form.stationName" type="text" placeholder="请输入联络站" />
				</u-form-item>
				
				<u-form-item class="form-item border-none" required label="标题" prop="title">
					<!-- block -->
					<u-input v-model="form.title" type="text" placeholder="请输入标题" />
				</u-form-item>
				
				<u-form-item class="form-item border-none" required label="问题地点">
					<view class="form-right" @click="chooseLocation" v-if="form.address">
						<view class="input-text">{{ form.address }}</view>
					</view>
					<view class="form-right" v-else>
						<u-input @click="chooseLocation" disabled type="text" placeholder="请点击定位" />
						<u-icon name="arrow-right" color="#979797"></u-icon>
					</view>
				</u-form-item>
				<u-form-item class="form-item" label="发生地点">
					<!-- block -->
					<u-input v-model="form.address2" type="text" placeholder="请输入发生地点" />
				</u-form-item>

				<u-form-item class="form-item border-none" required label=" " label-position="top" prop="content">
					<!-- block -->
					<u-input
						input-align="left"
						v-model="form.content"
						type="textarea"
						placeholder="请输入详情（必填）"
						:clearable="false"
						:height="160"
						:maxlength="-1"
					/>
				</u-form-item>

				<u-form-item class="form-item" label=" " label-position="top">
					<!-- block -->
					<uni-file-upload :url="baseUrl + '/file/uploadNoToken'" :type="['all', 'image', 'audio']" :limit="10"></uni-file-upload>
				</u-form-item>
			</u-form>
		</view>

		<view class="fiexd-btm">
			<u-button class="form-btn" type="error" @click="confirm">提交</u-button>
			<!-- <view class="flex-box">
				<u-button class="form-btn" type="error" @click="confirm">提交</u-button>
				<u-button class="form-btn" type="success" @click="spare">草稿</u-button>
			</view> -->
		</view>

		<view class="popup-box" v-if="fShow">
			<view class="popup-flex">
				<scroll-view scroll-y="true" class="m-box">
					<view><image class="image" src="/static/img/finish.png" mode="widthFix"></image></view>
					<view class="h2">提交成功</view>
					<!-- <view class="summon"><view class="p p-center">可以在建言列表页面查看提交的建言状态</view></view> -->
				</scroll-view>

				<view class="fiexd-btm">
					<view class="flex-box">
						<u-button class="form-btn" @click="navTo('/pagesA/condi/list')">问题列表</u-button>
						<u-button class="form-btn" type="error" @click="fShow = false">再次提交</u-button>
					</view>
				</view>
			</view>
		</view>

		<view v-if="false && willClue"></view>
	</view>
</template>

<script>
import uniFileUpload from '@/components/uni-all-uploader.vue';
import selectTree from '@/components/uni-select-tree.vue';
import { mapState } from 'vuex';
export default {
	components: {
		uniFileUpload,
		selectTree
	},
	data() {
		return {
			id: '',
			title: '问题提报',
			typeA: '',
			phone: '',
			count: 3,
			ocrKey: '',
			disabled: false,
			fShow: false,
			codeTips: '获取验证码',
			content: ``,
			baseUrl: 'https://zxtemp.tanghecms.com/thrd_weifang',
			// baseUrl: 'http://192.168.1.240:8899',

			type: '',
			typeShow: false,
			typeList: [],

			dictType: '',
			form: {
				id: '',
				title: '',
				clientCode: '',
				submitUser: '',
				userId: '',
				userName: '',
				stationId: '',
				stationName: '',
				address: '',
				address2: '',
				phone: '',
				vCode: '',
				content: ''
			},
			rules: {
				title: [
					{
						required: true,
						message: '请输入标题',
						trigger: 'change'
					}
				],
				address: [
					{
						required: true,
						message: '请选择地址',
						trigger: 'change'
					}
				],
				phone: [
					{
						required: true,
						message: '请输入手机号',
						trigger: ['change']
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['change']
					}
				],
				vCode: [
					{
						required: true,
						message: '请输入验证码',
						trigger: 'change'
					}
				],
				content: [
					{
						required: true,
						message: '请输入正文内容',
						trigger: 'change'
					}
				]
			},
			willClue: {
				adoptUser: '',
				clientCode: ''
			}
		};
	},
	onLoad(option) {
		this.loadLogin();
		
		// #ifdef MP
		const accountInfo = uni.getAccountInfoSync();
		console.log(accountInfo);
		const envVersion = accountInfo.miniProgram.envVersion;
		if (envVersion == 'release') {
			this.baseUrl = 'https://zxtemp.tanghecms.com/thrd_weifang';
		}
		// #endif

		this.form.userId = option.userId;
		this.form.userName = option.userName;
		this.form.stationId = option.stationId;
		this.form.stationName = option.stationName;

		if (option && option.id) {
			this.id = option.id;
			this.title = '修改问题';
			this.typeA = 'spare';
			this.spareData();
		}

		uni.setNavigationBarTitle({
			title: this.title
		});

		this.countdown();
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	onUnload() {
		this.$store.commit('filePush', []);
	},
	computed: {
		...mapState(['userInfo', 'fileList'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.sysUser) {
				this.clientCode = this.userInfo.sysUser.clientCode;
				this.userId = this.userInfo.sysUser.id;
				this.phone = this.userInfo.sysUser.phone;

				this.form.clientCode = this.userInfo.sysUser.clientCode;
				this.form.submitUser = this.userInfo.sysUser.userName;
				this.form.phone = this.userInfo.sysUser.phone;
			} else {
				// this.$logout();
			}

			this.clientCode = '370783';
			this.form.clientCode = '370783';
		},
		codeChange(text) {
			this.codeTips = text;
		},
		timeChange({ date, dt }, idx) {
			this.form[idx] = date.year + '-' + date.month2 + '-' + date.day2;
			this[idx] = Math.round(dt / 1000);
		},
		getCode() {
			let data = {
				phone: this.form.phone,
				clientCode: this.clientCode
			};
			if (this.$refs.uCode.canGetCode) {
				this.$requestUrl(this.baseUrl + '/lvzhitong/questions/verificationCode', data, {
					load: true
				}).then((res) => {
					this.$msg('验证码已发送');
					this.$refs.uCode.start();
				});
			} else {
				this.$u.toast('倒计时结束后再发送');
			}
		},
		countdown(e) {
			setTimeout(() => {
				if (this.count > 0) {
					this.count--;
					this.countdown();
				} else {
					this.agree = true;
				}
			}, 1000);
		},
		loadDict(type, list, value) {
			this.$requestUrl(this.baseUrl + '/system/sys-dict/dictList', {
				clientCode: this.clientCode,
				sysDict: {
					dictType: type
				}
			}).then((res) => {
				if (!res.data) {
					return false;
				}
				this[list] = [];
				res.data.forEach((item) => {
					this[list].push({
						value: item.dictValue,
						name: item.dictValue,
						label: item.dictName
					});
				});
			});
		},
		spareData() {
			this.$requestUrl(this.baseUrl + '/question/masses/query/' + this.id, {
				id: this.id,
				userId: this.userId
			}).then((res) => {
				// Object.assign(this.form, res.data.masses);
				Object.keys(this.form).forEach((key) => (this.form[key] = res.data.masses[key]));
				this.$store.commit('filePush', res.data.fileList);

				let regx = /<[^>]*>|<\/[^>]*>/gm;
				if (res.data.masses.content) {
					this.form.content = res.data.masses.content.replace(regx, '');
				}
			});
		},
		spare() {
			this.form.nodeStatus = '0';
			this.confirm();
		},
		chooseLocation(e) {
			try {
				uni.getLocation({
					type: 'gcj02',
					success: (result) => {
						uni.chooseLocation({
							longitude: result.longitude,
							latitude: result.latitude, //纬度
							success: (res) => {
								this.form.address = res.address;
							}
						});
					}
				});
			} catch (e) {
				this.$msg('请检查位置信息');
			}
		},
		navTo(e) {
			uni.navigateTo({
				url: e
			});
		},
		back(e) {
			uni.navigateBack({});
		},
		confirm() {
			if (!this.form.submitUser) {
				this.$msg('请输入提交人');
				return false;
			}

			this.$refs.uForm.validate((valid) => {
				if (!valid) {
					console.log('验证失败');
					return false;
				} else {
					let data = {};

					if (this.phone != this.form.phone && !this.form.vCode) {
						this.$msg('请输入验证码');
						return false;
					}

					data = {
						userId: this.userId,
						clientCode: this.clientCode,
						file: this.fileList,
						problem: {
							title: this.form.title,
							address: this.form.address,
							positionAddress: this.form.address2,
							content: this.form.content,
							commitUserName: this.form.submitUser,
							commitUserPhone: this.form.phone,
							toUserId: this.form.userId,
							stationId: this.form.stationId,
							stationName: this.form.userName
						}
						
					};

					data.problem.positionAddress = this.form.address + this.form.address2;

					// if (data.content) {
					// 	data.content = `<p>${data.content}</p>`;
					// }

					let url = this.baseUrl + '/problem/add';
					this.$requestUrl(url, data, {
						load: true
					}).then((res) => {
						this.$msg(res.msg);
						this.fShow = true;
						// setTimeout(() => {
						// 	let pre = this.$prePage();
						// 	if (pre && pre.loadData) {
						// 		pre.loadData('refresh');
						// 	}
						// 	uni.navigateBack();
						// }, 500);
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
.detail-view {
	background-color: #fff;
}

.popup-box {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	padding: 30rpx;
	background-color: #fff;

	.h2 {
		margin-bottom: 26rpx;
		font-size: 18px;
		font-weight: bold;
		color: #333;
		line-height: 48rpx;
		text-align: center;
	}

	.image {
		margin: 146rpx auto 44rpx;
		width: 152rpx;
		height: 152rpx;
	}

	.summon {
		white-space: pre-wrap;
		font-size: 17px;
		line-height: 54rpx;

		.p {
			margin-bottom: 1em;
		}

		.p-center {
			text-align: center;
		}
	}
}

.popup-flex {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.m-box {
	flex-wrap: nowrap;
	flex: 1;
	height: 0;
}

.form-box {
	.form-item {
		@include mp-flex;
		border-bottom: 20rpx solid $u-border-color;

		&.border-none {
			border-bottom: 0;
		}
	}

	.form-right {
		display: flex;
		justify-content: flex-end;
		width: 100%;
		text-align: right;

		.input-text {
			padding: 11rpx 0;
			line-height: 48rpx;
			text-align: right;
		}

		.image {
			margin-left: 20rpx;
			width: 70rpx;
			height: 70rpx;
		}
	}

	.code {
		padding: 0 16rpx;
		color: #d0021b;
	}

	.form-checkbox {
		// padding: 8rpx 0;
		margin: -8rpx 0;
	}
}

.fiexd-btm {
	position: static;
	padding: 30rpx;
}
</style>
